<template>
  <div>
    <h1>计数器vuex版</h1>
    <div>{{store.state.count}}</div>
    <button @click="increment">mutations更新</button>
    <button @click="incrementActions">actions异步更新</button>
  </div>
</template>

<script lang='ts'>
import {ref,reactive} from 'vue'
import {useStore} from 'vuex'
export default{
 setup(){
  const store=useStore()
  const increment=():void=>{
    //在组件中使用store.commit()方法完成调用vuex仓库中的mutations中的方法
    //参数1，表示的是方法的名称
    store.commit('increment',1)   
  }
  const incrementActions=():void=>{
     //使用store.dispatch方法完成调用vuex中actions中的方法，来完成异步操作
     store.dispatch('incrementAsync',2)
  }
  return{
    store,
    increment,
    incrementActions
  }
 }
}
</script>

<style lang='scss' scoped>
</style>